<template>
  <div class="operating-index">
    <!-- <div class="head">
            <h1>大数据可视化展板通用模板</h1>
        </div> -->
    <div class="tip" v-if="(configData || []).length > 0">
      图表为近七天数据统计
      <div class="popover">
        <el-popover
          placement="top"
          width="570"
          trigger="click"
          v-model="visible"
        >
          <el-transfer
            ref="transfer"
            id="transfer"
            target-order="unshift"
            v-model="selectValue"
            :data="configData"
            :titles="['隐藏', '显示']"
            :props="{
              key: 'custom_chart_id',
              label: 'custom_chart_name',
            }"
          >
          </el-transfer>
          <div style="text-align: right; margin: 0">
            <el-button size="mini" type="text" @click="visible = false"
              >取消</el-button
            >
            <el-button type="primary" size="mini" @click="handleOk"
              >确定</el-button
            >
          </div>
          <!-- <el-button  style="padding-right: 10px;display: flex; justify-content: flex-end;" type="primary" plain slot="reference"><i class="el-icon-setting"></i></el-button> -->
          <button class="Btn" slot="reference">
            <span class="svgContainer">
              <i class="el-icon-setting"></i>
            </span>
            <span class="BG"></span>
          </button>
        </el-popover>
      </div>
    </div>
    <div v-if="!loading">
      <Draggable class="charts">
        <ChartCard
          :title="item.custom_chart_name"
          :itemData="item"
          :key="index"
          v-for="(item, index) in tableData"
        >
          <transition name="el-fade-in">
            <component
              key="1"
              v-if="cacheData[index]"
              :is="cacheData[index].comp_name"
            ></component>
            <div key="2" v-else style="height: 300px" class="load-wrap">
              <div class="loader">
                <div class="box"></div>
                <div class="box"></div>
                <div class="box"></div>
              </div>
            </div>
          </transition>
          <!-- <OperatingCosts v-if="item.custom_chart_id === '4'"></OperatingCosts>
                         <TimeRate v-if="item.custom_chart_id === '2'"></TimeRate>
                         <TemperatureRate v-if="item.custom_chart_id === '3'"></TemperatureRate>
                         <Position v-if="item.custom_chart_id === '20'"></Position>
                         <IncubatorNum v-if="item.custom_chart_id === '21'"></IncubatorNum>
                         <Unreconciled v-if="item.custom_chart_id === '22'"></Unreconciled> -->
        </ChartCard>
      </Draggable>
      <!-- <div class="boxall">
                <div class="alltitle">运营总成本</div>
                <OperatingCosts></OperatingCosts>
                <div class="boxfoot"></div>
            </div> -->
      <!-- <div class="boxall">
                <div class="alltitle">时效履约率</div>
                <TimeRate></TimeRate>
                <div class="boxfoot"></div>
            </div>
            <div class="boxall">
                <div class="alltitle">温度履约率</div>
                <TemperatureRate></TemperatureRate>
                <div class="boxfoot"></div>
            </div>
            <div class="boxall">
                <div class="alltitle">温度计位置</div>
                <Position></Position>
                <div class="boxfoot"></div>
            </div>
            <div class="boxall">
                <div class="alltitle">保温箱数量</div>
                <IncubatorNum></IncubatorNum>
                <div class="boxfoot"></div>
            </div>
            <div class="boxall">
                <div class="alltitle">承运商未对账</div>
                <Unreconciled></Unreconciled>
                <div class="boxfoot"></div>
            </div> -->
    </div>
  </div>
</template>

<script>
import OperatingCosts from "./operatingCosts.vue";
import Position from "./position.vue";
import ChartCard from "../chartCard.vue";
import TimeRate from "./timeRate.vue";
import TemperatureRate from "./temperatureRate.vue";
import IncubatorNum from "./incubatorNum.vue";
import Unreconciled from "./unreconciled.vue";
import Draggable from "vuedraggable";

import { definedChartList, definedChartUpdate } from "@/api/echarts";
import Sortable from "sortablejs";

export default {
  name: "index",
  components: {
    Draggable,
    ChartCard,
    OperatingCosts,
    TimeRate,
    Position,
    TemperatureRate,
    IncubatorNum,
    Unreconciled,
  },
  props: [],
  data() {
    return {
      configData: [],
      selectValue: [],
      tableData: [],
      cacheData: [],
      loading: false,
      visible: false,
      comps: [
        {
          key: "2",
          comp_name: "TimeRate",
        },
        {
          key: "4",
          comp_name: "OperatingCosts",
        },
        {
          key: "3",
          comp_name: "TemperatureRate",
        },
        {
          key: "20",
          comp_name: "Position",
        },
        {
          key: "21",
          comp_name: "IncubatorNum",
        },
        {
          key: "22",
          comp_name: "Unreconciled",
        },
      ],
    };
  },
  mounted() {
    this.getChartData();
    const transfer = this.$refs.transfer.$el;
    const leftPanel = transfer
      .getElementsByClassName("el-transfer-panel")[0]
      .getElementsByClassName("el-transfer-panel__body")[0];
    const rightPanel = transfer
      .getElementsByClassName("el-transfer-panel")[1]
      .getElementsByClassName("el-transfer-panel__body")[0];
    const rightEl = rightPanel.getElementsByClassName(
      "el-transfer-panel__list"
    )[0];
    Sortable.create(rightEl, {
      animation: 100,
      onEnd: (evt) => {
        const { oldIndex, newIndex } = evt;
        const temp = this.selectValue[oldIndex];
        if (!temp || temp === "undefined") {
          return;
        }
        for (var i = 0; i < this.selectValue.length; i++) {
          if (
            this.selectValue[i] === "" ||
            this.selectValue[i] === null ||
            typeof this.selectValue[i] === "undefined"
          ) {
            this.selectValue.splice(i, 1);
            i = i - 1;
          }
        }
        const arr_temp = [].concat(this.selectValue); // 创建一个新的临时数组，用以操作后不变更原数组
        // console.log(arr_temp, "移动之前");
        arr_temp.splice(newIndex, 0, arr_temp.splice(oldIndex, 1)[0]); // 在b位置插入从a位置截取的元素
        this.selectValue = arr_temp;
        // console.log(this.selectValue, "移动之后");
        this.$emit("update:call-back", this.selectValue);
      },
    });
    const leftEl = leftPanel.getElementsByClassName(
      "el-transfer-panel__list"
    )[0];
    Sortable.create(leftEl, {
      animation: 100,
      onEnd: (evt) => {
        const { oldIndex, newIndex } = evt;
        const temp = this.datas[oldIndex];
        this.$set(this.datas, oldIndex, this.datas[newIndex]);
        this.$set(this.datas, newIndex, temp);
      },
    });
    leftPanel.ondragover = (ev) => {
      ev.preventDefault();
    };
    leftPanel.ondrop = (ev) => {
      ev.preventDefault();
      const index = this.selectValue.indexOf(this.draggingKey);
      if (index !== -1) {
        this.selectValue.splice(ev, 1);
      }
      // console.log(this.draggingKey, "draggingKey");
    };
    rightPanel.ondragover = (ev) => {
      ev.preventDefault();
    };
    rightPanel.ondrop = (ev) => {
      ev.preventDefault();
      if (this.selectValue.indexOf(this.draggingKey) === -1) {
        this.selectValue.push(this.draggingKey);
      }
    };
  },
  methods: {
    getHasmore(key) {
      // console.log(key, ["4"].includes(key));
      if (["4"].includes(key)) {
        return true;
      }
    },
    getChartData() {
      this.loading = true;
      definedChartList({}).then((res) => {
        const data = res.data.data || {};
        data.select_items = data.select_items || [];
        this.tableData = [];
        data.select_items.forEach((element) => {
          const comp = this.comps.find(
            (x) => x.key === element.custom_chart_id
          );
          if (comp) {
            this.tableData.push({
              ...element,
              comp_name: comp.comp_name,
            });
          }
        });
        for (let index = 0; index < this.tableData.length; index++) {
          const item = this.tableData[index];
          setTimeout(() => {
            // console.log(
              index * 1000,
              "index * 1000index * 1000index * 1000index * 1000index * 1000index * 1000"
            );
            this.cacheData.push(item);
          }, index * 1000);
        }
        this.loading = false;
        this.selectValue = data.select_items.map(
          (item) => item.custom_chart_id
        );
        this.configData = data.select_items.concat(
          data.un_selected_items || []
        );
        // console.log(this.selectValue, this.configData);
      });
    },
    handleOk() {
      const rightData = this.configData.filter((item) =>
        this.selectValue.includes(item.custom_chart_id)
      );
      let itemData = rightData.map((element, index) => {
        return {
          custom_chart_id: element.custom_chart_id * 1,
          sequence:
            rightData.length -
            this.selectValue.indexOf(element.custom_chart_id),
        };
      });
      definedChartUpdate({
        items_data: itemData,
      }).then((res) => {
        this.visible = false;
        this.getChartData();
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.operating-index {
  margin-top: -10px;
  margin-bottom: -10px;
}

.tip {
  padding: 5px 10px;
  display: flex;
  justify-content: flex-end;
  color: #333;
  font-size: 12px;
  line-height: 25px;
}

.popover {
  // position: absolute;
  // right: 10px;
  // // top: -2px;
  // z-index: 11;
}

.charts {
  padding-right: 10px;
  display: flex;
  flex-wrap: wrap;
  flex: 0 0 auto;
  align-items: flex-start;
}

.Btn {
  width: 25px;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background-color: transparent;
  position: relative;
  /* overflow: hidden; */
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.3s;
  padding-left: 3px;
}

.svgContainer {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  backdrop-filter: blur(0px);
  letter-spacing: 0.8px;
  border-radius: 2px;
  transition: all 0.3s;
  //   border: 1px solid rgba(156, 156, 156, 0.466);
  color: #409eff;
  box-shadow: 0px 10px 40px 5px rgba(0, 0, 0, 0.25);
}

.BG {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background: #ecf5ff;
  //   border-color: #b3d8ff;
  z-index: -1;
  border-radius: 2px;
  pointer-events: none;
  transition: all 0.3s;
}

.Btn:hover .BG {
  transform: rotate(35deg);
  transform-origin: bottom;
}

.Btn:hover .svgContainer {
  background-color: #409eff;
  border-color: #3a8ee6;
  color: #fff;
  backdrop-filter: blur(4px);
}

.load-wrap {
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;

  .loader {
    --size: 12px;
    display: flex;
    gap: 0.6rem;
  }

  .box {
    width: var(--size);
    height: var(--size);
    background: #0270e1;
    animation: rotate 2s infinite;
  }

  .box:nth-child(2) {
    animation-delay: 0.25s;
  }

  .box:nth-child(3) {
    animation-delay: 0.5s;
  }

  @keyframes rotate {
    50% {
      transform: rotate(180deg);
    }
  }
}
</style>